<template>
	<view class="content">
		<view class="head_bg">
			<image src="../../static/img/login/head_nav.png"></image>
		</view>
		<view class="content-area">
			<view class="title">
				<text>选择类型</text>
				<uni-icons type="bars" size="30" @click="showPop"></uni-icons>
			</view>
			<view class="card_type">
				<view class="id_card" @click="go_idcard">
					<view class="card_text">
						<text>身份证</text>
						<text>身份证使用点入识别</text>
					</view>
					<view class="card_img">
						<image src="../../static/img/index/idcard.png" mode=""></image>
					</view>
				</view>
				<view class="id_card" @click="go_bank">
					<view class="card_text">
						<text>银行卡</text>
						<text>银行卡使用点入识别</text>
					</view>
					<view class="card_img">
						<image src="../../static/img/index/bank.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹出层组件 -->
		<popup-layer ref="popupRef" :direction="'left'" v-model="boolShow">
		  <view class="pop_box">
			  <view class="pop_setting" @click="go_setting">
				  <uni-icons type="gear" size="26"></uni-icons>
				  <text>设置</text>
			  </view>
		  </view>
		</popup-layer>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import popupLayer from "@/components/popup-layer/popup-layer.vue";
	export default {
		components: {
			uniIcons,
			popupLayer
		},
		data() {
			return {
				boolShow: false
			}
		},
		onLoad() {

		},
		methods: {
			go_idcard() {
				this.$store.commit("pictureStatus", " ") 
				uni.navigateTo({
					url:'../idCard/idCard'
				})
			},
			go_bank() {
				this.$store.commit("pictureStatus", " ")
				uni.navigateTo({
					url:'../bank/bank'
				})
			},
			//显示弹出层
			showPop() {
				this.$refs.popupRef.show() // 弹出
			},
			//前往设置界面
			go_setting() {
				this.$refs.popupRef.close()
				uni.navigateTo({
					url:"/pages/setting/setting"
				})
			}
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss">
	.content{
		box-sizing: border-box;
	}
	.content-area{
		padding: 24rpx;
		.title{
			display: flex;
			justify-content: space-between;
			align-items: center;
			text{
				font-size: 40rpx;
				font-weight: bold;
			}
			
		}
	 }
	.head_bg{ width: 100%; box-sizing: border-box;}
	.head_bg image{ width: 100%; height: 128rpx; display: block;}
	.card_type{
		.id_card{
			margin-top: 35rpx;
			display: flex;
			justify-content: space-around;
			background: #FFFFFF;
			border-radius: 12upx;
			padding: 40upx 25upx;
			box-shadow: 0 6upx 18upx rgba(0,0,0,0.14);
			.card_text{
				display: flex;
				flex-direction: column;
				justify-content: center;
				color: #7B84A3;
				text:nth-child(1){
					font-weight: 400;
					font-size: 48rpx;
				}
				text:nth-child(2){
					font-size: 28rpx;
				}
			}
			.card_img{
				image{
					width: 167rpx;
					height: 110rpx;
				}
			}
		}
	}
	.pop_box{
		margin-top: 124rpx;
		.pop_setting{
			width:270rpx;
			height: 90rpx;
			display: flex;
			justify-content: center;	
			align-items: center;
			border-top: 1px solid #c2c2c2;
			border-bottom: 1px solid #c2c2c2;
			text{
				margin-left: 14rpx;
				font-size: 26rpx;
			}
		}
	}
	
</style>
